<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>品牌列表案例</title>
		<link rel="stylesheet" href="./lib/bootstrap.css">
		<link rel="stylesheet" href="./css/brandlist.css">
		<script src="lib/list.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 卡片区域 -->
			<div class="card">
				<div class="card-header">
					添加品牌
				</div>
				<div class="card-body">
					<!-- 添加品牌的表单区域 -->
					<!-- form 表单元素有 submit 事件 -->
					<form>
						<div class="form-row align-items-center">
							<div class="col-auto col-2">
								<div class="input-group mb-2">
									<div class="input-group-prepend">
										<div class="input-group-text">品牌名称</div>
									</div>
									<input type="text" class="form-control" id="brandName" placeholder="请输入品牌名称" required>
								</div>
							</div>
							<div class="col-auto col-2">
								<div class="input-group mb-2">
									<div class="input-group-prepend">
										<div class="input-group-text">数量</div>
									</div>
									<input type="number" min="0" id="addNum" class="form-control" placeholder="请输数量" required>
								</div>
							</div>
							<div class="col-auto col-2">
								<div class="input-group mb-2">
									<div class="input-group-prepend">
										<div class="input-group-text">单价￥</div>
									</div>
									<input type="number" step="0.01" min="0" id="addPrice" class="form-control" placeholder="请输入单价" required>
								</div>
							</div>
							<div class="col-auto">
								<button type="button" class="btn btn-primary mb-2" onclick="addItem()">添加</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!-- 表格区域 -->
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th scope="col">
							<div class="custom-control custom-switch">
								<input type="checkbox" class="custom-control-input" id="cb0" checked="checked" onclick="checkAll(this)">
								<label class="custom-control-label" for="cb0">全选</label>
							</div>
						</th>
						<th scope="col">序号</th>
						<th scope="col">品牌名称</th>
						<th scope="col">数量</th>
						<th scope="col">单价</th>
						<th scope="col">总价</th>
						<th scope="col">创建时间</th>
						<th scope="col">操作</th>
					</tr>
				</thead>
				<tbody id="tbody">
					
					 <!-- <tr>
						<td>
							<div class="custom-control custom-switch">
								<input type="checkbox" class="custom-control-input" id="cb1" checked>
								<label class="custom-control-label" for="cb1">已选</label>
							</div>
						</td>
						<td>1</td>
						<td>迪奥999色号口红</td>
						<td>3</td>
						<td>￥330.00</td>
						<td>￥990.00</td>
						<td>2023-01-11 08:30:00</td>
						<td>
							<a href="javascript:;">增加</a>
							<a href="javascript:;">减少</a>
							<a href="javascript:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>
							<div class="custom-control custom-switch">
								<input type="checkbox" class="custom-control-input" id="cb2">
								<label class="custom-control-label" for="cb2">未选</label>
							</div>
						</td>
						<td>2</td>
						<td>兰蔻196色号口红</td>
						<td>1</td>
						<td>￥320.00</td>
						<td>￥320.00</td>
						<td>2023-01-11 08:30:00</td>
						<td>
							<a href="javascript:;">增加</a>
							<a href="javascript:;">减少</a>
							<a href="javascript:;">删除</a>
						</td>
					</tr> -->
					
				</tbody>
			</table>
			<h4>总金额：<span class="text-danger">￥<span id="totalMoney">0.00</span></span></h4>
		</div>
	</body>

</html>
